<template>
  <div>
    <h1>👤 用户档案</h1>
    
    <!-- 省份选择组件 -->
    <Provinces @provinceSelected="handleProvinceSelected" />
    
    <!-- 显示选中的省份信息 -->
    <div v-if="selectedProvinceInfo" class="selected-province">
      <h3>已选择的省份：</h3>
      <p><strong>省份名称：</strong>{{ selectedProvinceInfo.name }}</p>
      <p><strong>省份代码：</strong>{{ selectedProvinceInfo.code }}</p>
      <p><strong>选择时间：</strong>{{ selectedProvinceInfo.time }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Provinces from '@/components/Provinces.vue';

// 存储选中的省份信息
const selectedProvinceInfo = ref<{
  code: string;
  name: string;
  time: string;
} | null>(null);

// 处理省份选择事件
const handleProvinceSelected = (code: string, name: string) => {
  console.log(`Selected province: ${name} (${code})`);
  
  // 更新选中的省份信息
  selectedProvinceInfo.value = {
    code,
    name,
    time: new Date().toLocaleString('zh-CN')
  };
  
  // 这里可以添加其他业务逻辑
  // 比如：保存到本地存储、发送到服务器等
};
</script>

<style scoped>
h1 {
  color: white;
  text-align: center;
  margin-bottom: 2rem;
}

.selected-province {
  margin-top: 2rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  color: white;
}

.selected-province h3 {
  margin: 0 0 1rem 0;
  color: #4facfe;
  font-size: 1.2rem;
}

.selected-province p {
  margin: 0.5rem 0;
  font-size: 1rem;
  opacity: 0.9;
}

.selected-province strong {
  color: #00f2fe;
}
</style>